<template>
  <div class="container" id="data">
    <div style="width:100%">
      <el-card
      v-for="(item, index) in unload"
      :key="index"
      shadow="hover"
      :body-style="{ padding: '0px' }"
    >
    <a href="../../public/template/江苏模板.xlsx" download="模板.xlsx">

      <div class="card-img">
          <img :src="item.image" class="image" />
      </div>
      <div class="content" style="padding: 20px 30px">
        <h5>{{ item.title }}</h5>
        <div class="terrace">
          <div class="terrace-img"></div>
          <div class="terrace-title">DFSY平台</div>
        </div>
        <div class="tags">
          <el-tooltip
            class="item"
            effect="dark"
            content="碳中和"
            placement="top"
          >
            <el-button>碳中和</el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="长三角"
            placement="top"
          >
            <el-button>长三角</el-button>
          </el-tooltip>
        </div>
        <div class="bottom clearfix smallItem">
          <p><i class="el-icon-view"></i>760</p>
          <p><i class="el-icon-download">43</i></p>
          <p>数值型</p>
          <time class="time">{{ item.time }}</time>

        </div>
      </div>
    </a>
    </el-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      currentDate: new Date(),
      unload: [
        {
          href:"../assets/江苏.xlsx",
          image:
            "https://images.unsplash.com/photo-1502252430442-aac78f397426?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NzN8fGdyZWVufGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
          title: "江苏国民经济",
          time:"2022-01-23"
        },
        {
          href:'',
          image:
            "https://images.unsplash.com/photo-1510784722466-f2aa9c52fff6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fG5hdHVyZXxlbnwwfDB8MHx8&auto=format&fit=crop&w=500&q=60",
          title: "江苏经济与建设",
          time:"2022-01-23"
        },
        {
          href:'',
          image:
            "https://images.unsplash.com/photo-1611273426858-450d8e3c9fce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzYwfHxlbnZpcm9ubWVudGFsfGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
          title: "江苏能源、资源、环境",
          time:"2022-01-23"
        },
        {
          href:'',
          image:
            "https://images.unsplash.com/photo-1446329813274-7c9036bd9a1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjN8fG5hdHVyZXxlbnwwfDB8MHx8&auto=format&fit=crop&w=500&q=60",
          title: "江苏人口、就业、工资",
          time:"2022-01-23"
        },
        {
          href:'',
          image:
            "https://pic.quanjing.com/wz/ju/QJ8179086780.jpg@!350h",
          title: "上海GDP",
          time:"2022-01-23"
        },
        {
          href:'',
          image:
            "https://pic.quanjing.com/ct/ak/QJ6673697511.jpg@!350h",
          title: "上海进出口总额",
          time:"2022-01-23"
        },
        {
          href:'',
          image:
            "https://images.unsplash.com/photo-1483825366482-1265f6ea9bc9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGVudmlyb25tZW50fGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
          title: "省级能源清单_2018",
          time:"2022-01-23"
        },
        {
          href:'',
          image:
            "https://images.unsplash.com/photo-1470115636492-6d2b56f9146d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTh8fGdyZWVufGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=500&q=60",
          title: "省级碳排放清单_1997-2019",
          time:"2022-01-23"
        },
        {
          href:'',
          image:
            "https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bGFuZHNjYXBlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
          title: "中国表观排放清单_1997_-_2019",
          time:"2022-01-23"
        },
      ],
    };
  },
  methods:{
    unLoad(){
      axios({
        url:'http://127.0.0.1:8000/upload_excel',
        // url:'https://ku.qingnian8.com/dataApi/blog/showBlog.php',
        methods:"get",
      }).then((res)=>{
        console.log(res.data)
        this.upload=res.data
      })
    },
  
  },
  mounted() {
    this.unLoad()
  },
};
</script>

<style lang='scss' scoped>
#data>div {

  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  .el-card {
    width: 30%;
    cursor: pointer;
    margin-top: 30px;
    .card-img{
        overflow: hidden;
    }
    &:hover .image{
        transform: scale(1.3,1.3);
        transition: 1s all;
    }
    a{
      text-decoration: none;
      color: black;
    }
    .content {
      text-align: left;
      h5 {
        font-weight: 700;
        margin-bottom: 50px;
      }
      .terrace {
        display: flex;
        align-items: center;
        .terrace-img {
          background-image: url("../assets/下载.png");
          background-repeat: no-repeat;
          background-position: 4px;
          line-height: 42px;
          width: 20px;
          height: 42px;
          margin-right: 10px;
        }
      }
      .item{
          background: #FFEAE8;
          color: red;
          padding: 5px 20px;
          border: none;
          border-radius: 20px;
      }
      .smallItem{
          margin-top: 20px;
          font-size: 10px;
          display: flex;
          justify-content: space-between;
      }
    }
  }
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 150px;
  display: block;
  transform: scale(1.0,1.0);
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
